<template>
    <div class="tooltip-wrapper">
      <div class="tooltip-content">
        {{ content }}
      </div>
      <div class="tooltip-slot">
        <slot />
      </div>
    </div>
  </template>
  
  <script>
  export default {
    name: 'pui-tooltip',
    props: {
      content: {
        type: String,
        required: true,
      },
    },
  };
  </script>
  
  <style scoped>
  .tooltip-wrapper {
    position: relative;
  }
  
  .tooltip-content {
    position: absolute;
    top: +30px;
    left: 5%;
    transform: translateX(-50%);
    background-color: #333;
    color: #fff;
    padding: 5px;
    border-radius: 4px;
    font-size: 12px;
    white-space: nowrap;
    visibility: hidden;
    opacity: 0;
    transition: opacity 0.3s ease-in-out, visibility 0.3s ease-in-out;
  }
  
  .tooltip-wrapper:hover .tooltip-content {
    visibility: visible;
    opacity: 1;
  }
  
  .tooltip-slot {
    display: inline-block;
  }
  </style>